<template>
  <div class="flex_cm container" style="height: 100%">
    <search
      :form_data="header_list"
      @changeIsShow="
        (e) => {
          header_list[e].isShow = !header_list[e].isShow;
          header_list[e].value = header_list[e].type == 'input_number' ? ['', ''] : '';
        }
      "
      @search="search_key"
      @reset="
        header_list.forEach((item) => {
          item.value = item.type == 'input_number' ? ['', ''] : '';
        }),
          search_key()
      "
    ></search>
    <div class="p_0_10 bg_fff flex1">
      <div class="flex_js p_10_0">
        <div>项目列表</div>
        <div class="flex">
          <el-button
            type="primary"
            :disabled="!has_setUp"
            @click="show_box = true"
            v-if="has_role_list[2].has_role"
            >新增</el-button
          >
          <setTable
            :data="header_list"
            :height_size="height_size"
            @changeShowTable="
              (e) => {
                header_list[e].showTable = !header_list[e].showTable;
              }
            "
            @resetTableSet="
              () => {
                header_list.forEach((item) => {
                  item.showTable = true;
                });
              }
            "
            @changeHeightSize="
              (e) => {
                height_size = e;
              }
            "
          ></setTable>
        </div>
      </div>
      <el-table
        style="text-align: center"
        :data="list"
        :max-height="max_height"
        border
        v-loading="loading"
        :default-sort="{}"
        :row-style="{
          height: height_size == 1 ? '58px' : height_size == 2 ? '48px' : '38px',
        }"
        :cell-style="{
          padding: height_size == 3 ? '0' : '',
        }"
        @expand-change="expandChange"
        row-key="id"
        :expand-row-keys="expands"
        ref="tables"
      >
        <el-table-column type="expand">
          <template #default="props">
            <div m="4 " class="p_10" style="background: rgb(240, 242, 245)">
              <h4>任务分配：</h4>
              <el-table
                class="tc m_top10"
                :data="props.row.task_list"
                border
                :style="{ width: table_width + 'px' }"
                v-loading="children_loading"
                max-height="500"
              >
                <el-table-column type="index" label="序号" width="80px"></el-table-column>
                <el-table-column label="任务名称" prop="name">
                  <template #default="scope">
                    <div class="flex_cc">
                      {{ scope.row.name }}
                      <el-icon
                        v-if="!scope.row.isAdd"
                        @click="
                          add_task_item({
                            list: props.row.task_list,
                            index: scope.$index,
                          })
                        "
                        class="border p_5 m_left10 cp"
                        ><Plus
                      /></el-icon>
                      <el-icon
                        v-if="scope.row.isAdd"
                        @click="
                          task_list.forEach((i) => {
                            i.assigneeId_list = i.assigneeId_list.filter((ii) => {
                              return ii != scope.row.oldAssigneeId;
                            });
                          }),
                            task_list.splice(scope.$index, 1)
                        "
                        class="border p_5 m_left10 cp"
                        ><Minus
                      /></el-icon>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column label="任务编码" prop="code"></el-table-column>
                <el-table-column label="任务权重" prop="taskWeight"> </el-table-column>
                <el-table-column label="分配权重" width="80px"
                  ><template #default="scope">
                    <el-input
                      :disabled="[4, 5].includes(scope.row.status)"
                      v-model="scope.row.assignWeight"
                      placeholder="请输入"
                    >
                    </el-input> </template
                ></el-table-column>
                <el-table-column label="分配人" width="140px">
                  <template #default="scope">
                    <el-select
                      filterable
                      v-model="scope.row.assigneeId"
                      clearable
                      :disabled="[4, 5].includes(scope.row.status)"
                      @change="
                        (i) => {
                          select_member(i, scope.$index);
                        }
                      "
                    >
                      <el-option
                        :disabled="scope.row.assigneeId_list?.includes(item.memberId)"
                        v-for="item in dept_member_list"
                        :key="item.memberId"
                        :value="item.memberId"
                        :label="item.memberName"
                      >
                      </el-option>
                    </el-select>
                  </template>
                </el-table-column>
                <el-table-column label="子任务">
                  <el-table-column
                    v-for="(item, index) in node_list"
                    :key="item.id"
                    :label="item.name"
                  >
                    <template #default="scope">
                      <div v-if="scope.row.taskConfigNodeIdList_table?.length">
                        <!-- 任务 或者子任务完成 =>disabled -->
                        <el-checkbox
                          :disabled="
                            [4, 5].includes(scope.row.status) ||
                            scope.row.taskConfigNodeIdList_table[index].completionRate ==
                              100
                          "
                          @change="
                            (e) => {
                              change_checked(e, scope.$index, index);
                            }
                          "
                          v-if="!scope.row.taskConfigNodeIdList_table[index].isCancel"
                          v-model="scope.row.taskConfigNodeIdList_table[index].checked"
                        ></el-checkbox>
                        <el-tooltip
                          v-else
                          class="box-item"
                          effect="dark"
                          content="分配取消"
                          placement="bottom"
                        >
                          <el-icon
                            class="border p_5 cp"
                            @click="change_checked('', scope.$index, index)"
                            ><Close
                          /></el-icon>
                        </el-tooltip>
                      </div>
                    </template>
                  </el-table-column>
                </el-table-column>
              </el-table>
              <div class="m_top10" v-if="props.row.status == 1">
                <el-button type="primary" @click="assign_task(props.row.task_list)">
                  <span v-if="!has_task_list">确认</span
                  ><span v-else>更新</span>任务分配</el-button
                >
                <el-button
                  type="primary"
                  @click="show_plan_box = true"
                  v-if="current_task_list.length"
                  >进度分配</el-button
                >
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column type="index" label="序号" width="80px"></el-table-column>
        <el-table-column
          width="100"
          label="项目名称"
          prop="name"
          key="项目名称"
          sortable
          v-if="header_list[0].showTable"
        ></el-table-column>
        <el-table-column
          width="100"
          label="项目代号"
          prop="code"
          key="项目代号"
          sortable
          v-if="header_list[1].showTable"
        ></el-table-column>
        <el-table-column
          label="面积"
          prop="area"
          key="面积"
          sortable
          v-if="header_list[2].showTable"
        ></el-table-column>
        <el-table-column
          width="100"
          label="设计经理"
          prop="managerName"
          key="设计经理"
          sortable
          v-if="header_list[3].showTable"
        ></el-table-column>
        <el-table-column
          width="100"
          label="设计组长"
          prop="groupLeaderName"
          key="设计组长"
          sortable
          v-if="header_list[4].showTable"
        ></el-table-column>
        <el-table-column
          width="100"
          label="设计部门"
          prop="deptName"
          key="设计部门"
          sortable
          v-if="header_list[5].showTable"
        ></el-table-column>
        <el-table-column
          label="状态"
          key="状态"
          sortable
          prop="status"
          v-if="header_list[6].showTable"
          ><template #default="scope: any">
            <!-- <div v-if="scope.row.status == 0">未开始</div> -->
            <div v-if="scope.row.status == 1">进行中</div>
            <div v-if="scope.row.status == 2">资料已提交</div>
            <div v-if="scope.row.status == 3">已完成</div></template
          ></el-table-column
        >
        <el-table-column
          width="100"
          label="已用工时"
          prop="usedHours"
          key="已用工时"
          sortable
          v-if="header_list[7].showTable"
        ></el-table-column>
        <el-table-column
          width="100"
          label="超时状态"
          prop="timeoutStatus"
          key="超时状态"
          sortable
          v-if="header_list[8].showTable"
          ><template #default="scope: any">
            <div v-if="!scope.row.timeoutStatus" style="color: #3580eb">未超时</div>
            <div v-else>已超时</div></template
          ></el-table-column
        >
        <el-table-column
          width="120"
          label="计划开始时间"
          prop="planStartTime"
          key="计划开始时间"
          sortable
          v-if="header_list[9].showTable"
          ><template #default="scope">
            <div v-if="scope.row.planStartTime ?? '' !== ''">
              {{ formatDate(parseInt(scope.row.planStartTime), "YYYY-MM-DD") }}
            </div>
            <div v-else>-- --</div>
          </template></el-table-column
        >
        <el-table-column
          width="120"
          label="计划完成时间"
          prop="planEndTime"
          key="计划完成时间"
          sortable
          v-if="header_list[10].showTable"
          ><template #default="scope">
            <div v-if="scope.row.planEndTime ?? '' !== ''">
              {{ formatDate(parseInt(scope.row.planEndTime), "YYYY-MM-DD") }}
            </div>
            <div v-else>-- --</div>
          </template></el-table-column
        >
        <el-table-column
          width="120"
          label="实际开始时间"
          prop="actualStartTime"
          key="实际开始时间"
          sortable
          v-if="header_list[11].showTable"
          ><template #default="scope">
            <div v-if="scope.row.actualStartTime ?? '' !== ''">
              {{ formatDate(parseInt(scope.row.actualStartTime), "YYYY-MM-DD") }}
            </div>
            <div v-else>-- --</div>
          </template></el-table-column
        >
        <el-table-column
          width="120"
          label="实际完成时间"
          prop="actualFinishTime"
          key="实际完成时间"
          sortable
          v-if="header_list[12].showTable"
          ><template #default="scope">
            <div v-if="scope.row.actualFinishTime ?? '' !== ''">
              {{ formatDate(parseInt(scope.row.actualFinishTime), "YYYY-MM-DD") }}
            </div>
            <div v-else>-- --</div>
          </template></el-table-column
        >
        <el-table-column
          width="100"
          label="结算状态"
          prop="settleStatus"
          key="结算状态"
          sortable
          v-if="header_list[13].showTable"
          ><template #default="scope: any">
            <div v-if="!scope.row.settleStatus" style="color: #3580eb">未结算</div>
            <div v-else>已结算</div></template
          ></el-table-column
        >
        <el-table-column
          width="120"
          label="资料提交时间"
          prop="informationSubmitTime"
          key="资料提交时间"
          sortable
          v-if="header_list[14].showTable"
          ><template #default="scope">
            <div v-if="scope.row.informationSubmitTime ?? '' !== ''">
              {{ formatDate(parseInt(scope.row.informationSubmitTime), "YYYY-MM-DD") }}
            </div>
            <div v-else>-- --</div>
          </template>
        </el-table-column>
        <el-table-column
          width="120"
          label="三层交付时间"
          prop="finishTime"
          key="三层交付时间"
          sortable
          v-if="header_list[15].showTable"
          ><template #default="scope">
            <div v-if="scope.row.finishTime ?? '' !== ''">
              {{ formatDate(parseInt(scope.row.finishTime), "YYYY-MM-DD") }}
            </div>
            <div v-else>-- --</div>
          </template></el-table-column
        >
        <el-table-column
          width="120"
          label="服务企业"
          prop="serviceEnterpriseId"
          key="服务企业"
          sortable
          show-overflow-tooltip
          v-if="header_list[15].showTable"
          ><template #default="scope">
            <div v-for="item in serviceEnterpriseList" :key="item.id">
              <span v-if="scope.row.serviceEnterpriseId == item.id">{{ item.name }}</span>
            </div>
          </template></el-table-column
        >
        <el-table-column
          width="150"
          label="当前任务状态"
          key="当前任务状态"
          sortable
          show-overflow-tooltip
          v-if="header_list[15].showTable"
          ><template #default="scope">
            <div v-for="item in customStatusList" :key="item.id">
              <span v-if="scope.row.customStatus == item.code">{{ item.name }}</span>
            </div>
          </template></el-table-column
        >
        <el-table-column label="操作" fixed="right" width="500">
          <template #default="scope: any">
            <el-button
              @click="(item_form_data = scope.row), (taskFile_box = true);"
              v-if="has_role_list[3].has_role"
              >项目文件管理</el-button
            >
            <el-button
              v-if="scope.row.status != 3 && has_role_list[1].has_role"
              @click="edit_list(scope.row)"
              >编辑</el-button
            >
            <el-button
              v-if="scope.row.status == 1"
              @click="tables.toggleRowExpansion(scope.row)"
              >任务分配</el-button
            >
            <el-button
              v-if="scope.row.planHours !== null"
              @click="(item_form_data = scope.row), (requireChange_box = true);"
              >变更单</el-button
            >
            <el-button
              v-if="scope.row.status == 3 && scope.row.planHours !== null"
              @click="(item_form_data = scope.row), (show_submit_list_box = true);"
              >提交记录</el-button
            >
            <el-button
              v-if="scope.row.status == 3 && scope.row.planHours !== null"
              @click="(item_form_data = scope.row), (show_taskOprLog_box = true);"
              >操作记录</el-button
            >
            <el-button
              v-if="[1, 2].includes(scope.row.status) && scope.row.planHours !== null"
              @click="(item_form_data = scope.row), (submit_box = true);"
              :btn_loading="btn_loading"
              >资料提交</el-button
            >
            <el-button
              v-if="scope.row.status == 2"
              type="primary"
              @click="(item_form_data = scope.row), (complate_box = true);"
              >完成</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="m_10_0 pagination"
        v-model:currentPage="page_data.current"
        v-model:page-size="page_data.pageSize"
        :page-sizes="[10, 20, 50, 100]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="list_debounce()"
        @current-change="list_debounce()"
      />
    </div>
  </div>
  <el-drawer
    v-model="show_box"
    direction="rtl"
    size="40%"
    destroy-on-close
    @close="resetForm(addTaskform)"
    :close-on-click-modal="false"
  >
    <template #title>
      <h4 v-if="add_form_data.id == ''">新增项目</h4>
      <h4 v-else>编辑项目</h4>
    </template>
    <template #default>
      <el-form
        :model="add_form_data"
        ref="addTaskform"
        :rules="task_rules"
        label-width="120px"
      >
        <el-form-item label="项目名称" prop="name">
          <el-input
            v-model="add_form_data.name"
            placeholder="请输入"
            show-word-limit
            maxlength="30"
            style="width: 211px"
          ></el-input>
        </el-form-item>
        <el-form-item label="项目代号" prop="code">
          <el-input
            v-model="add_form_data.code"
            placeholder="请输入"
            show-word-limit
            maxlength="30"
            style="width: 211px"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="当前状态"
          v-if="add_form_data.id != '' && add_form_data.status == '2'"
        >
          <el-select v-model="add_form_data.customStatus">
            <el-option
              v-for="item in customStatusList"
              :key="item.code"
              :value="item.code"
              :label="item.name"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="面积" prop="area">
          <el-input-number
            :disabled="add_form_data.status > '1'"
            v-model="add_form_data.area"
            placeholder="请输入"
            type="number"
            :max="100000"
            :min="0"
            style="width: 211px"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="难度" prop="difficultyDegree">
          <el-select v-model="add_form_data.difficultyDegree">
            <el-option :value="1" label="简单"></el-option>
            <el-option :value="2" label="一般"></el-option>
            <el-option :value="3" label="困难"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="设计经理" prop="managerId">
          <el-select
            v-model="add_form_data.managerId"
            filterable
            :disabled="add_form_data.planHours == '1'"
          >
            <el-option
              v-for="item in member_list"
              :value="item.memberId"
              :label="item.name"
              :key="item.memberId"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="设计组" prop="deptId">
          <el-cascader
            v-model="add_form_data.deptId"
            :disabled="add_form_data.planHours == '1'"
            :options="dept_list"
            :props="dept_props"
            :show-all-levels="false"
            @change="change_dept_list"
            clearable
            ref="deptId_cascader"
          />
        </el-form-item>
        <el-form-item label="设计组长">
          <el-input
            disabled
            v-model="add_form_data.groupLeaderName"
            style="width: 211px"
          ></el-input>
        </el-form-item>
        <el-form-item label="计划开始时间" prop="planStartTime">
          <el-date-picker
            v-model="add_form_data.planStartTime"
            type="date"
            format="YYYY-MM-DD"
            value-format="x"
            placeholder="请选择"
            @change="
              () => {
                add_form_data.planEndTime =
                  add_form_data.planStartTime > add_form_data.planEndTime
                    ? ''
                    : add_form_data.planEndTime;
              }
            "
          />
        </el-form-item>
        <el-form-item label="计划完成时间" prop="planEndTime">
          <el-date-picker
            v-model="add_form_data.planEndTime"
            type="date"
            format="YYYY-MM-DD"
            value-format="x"
            placeholder="请选择"
            :disabled="add_form_data.planStartTime == ''"
            :disabled-date="disabledEnable"
          />
        </el-form-item>
        <el-form-item label="服务企业">
          <el-select
            v-model="add_form_data.serviceEnterpriseId"
            :disabled="add_form_data.id != ''"
            @change="EventBus.emit('change_serviceEnterpriseId')"
          >
            <el-option
              v-for="item in serviceEnterpriseList"
              :key="item.id"
              :value="item.id"
              :label="item.name"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="项目文件" v-if="add_form_data.id == ''">
          <taskFile
            :item_form_data="add_form_data"
            :isAdd="add_form_data.id == ''"
            :type="1"
          ></taskFile>
        </el-form-item>
        <div class="m_top10 tr">
          <el-button
            v-if="add_form_data.id != ''"
            @click="(item_form_data = add_form_data), (show_taskOprLog_box = true);"
            >操作记录</el-button
          >
          <el-button @click="resetForm(addTaskform)">取消</el-button>
          <el-button type="primary" @click="submit(addTaskform)" :loading="btn_loading"
            >确定</el-button
          >
        </div>
      </el-form>
    </template>
  </el-drawer>
  <plan_page
    :show_plan_box="show_plan_box"
    @close_plan_box="show_plan_box = false"
    :task_id="expands[0]"
    :dept_member_list="dept_member_list"
  ></plan_page>
  <el-drawer
    v-model="taskFile_box"
    direction="rtl"
    size="80%"
    destroy-on-close
    :close-on-click-modal="false"
  >
    <template #title><h4>项目文件管理</h4></template>
    <template #default>
      <taskFile :item_form_data="item_form_data" :type="5"></taskFile
    ></template>
  </el-drawer>

  <requireChange
    @close="requireChange_box = false"
    :requireChange_box="requireChange_box"
    :item_form_data="item_form_data"
    :member_list="member_list"
  ></requireChange>
  <submitData
    :submit_box="submit_box"
    :item_form_data="item_form_data"
    :member_list="member_list"
  ></submitData>
  <complate
    :complate_box="complate_box"
    @close="complate_box = false"
    :item_form_data="item_form_data"
  ></complate>
  <submitList
    :show_submit_list_box="show_submit_list_box"
    :item_form_data="item_form_data"
    :member_list="member_list"
    @close="show_submit_list_box = false"
  ></submitList>
  <taskOprLog
    :show_taskOprLog_box="show_taskOprLog_box"
    :item_form_data="item_form_data"
    :member_list="member_list"
    :customStatusList="customStatusList"
    :dept_list_arr="dept_list_arr"
    @close="show_taskOprLog_box = false"
  >
  </taskOprLog>
</template>

<script lang="ts" setup>
import { check_role, formatDate, debounce, handle_search_key } from "@/utils/check_role"; // 权限校验
import search from "@/view/components/search.vue";
import setTable from "@/view/components/setTable.vue";
import plan_page from "./container/plan.vue";
import taskFile from "./container/taskFile.vue";
import requireChange from "./container/requireChange.vue";
import submitData from "./container/submitData.vue";
import submitList from "./container/submitList.vue";
import taskOprLog from "./container/taskOprLog.vue";
import complate from "./container/complate.vue";
import { onMounted, ref, onUnmounted, computed } from "vue";
import axios from "@/service/HttpRequest";
import serviceApi from "@/service/api";
import EventBus from "@/utils/EventBus";
import { FormInstance, ElMessage, ElMessageBox } from "element-plus";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
const router = useRouter();
const store = useStore();
const addTaskform = ref<FormInstance>();
const task_rules = ref({
  // 表单验证规则
  name: [{ required: true, message: "请输入项目名称", trigger: "blur" }],
  code: [{ required: true, message: "请输入项目代号", trigger: "blur" }],
  area: [{ required: true, message: "请输入面积", trigger: "blur" }],
  managerId: [{ required: true, message: "请选择设计经理", trigger: "change" }],
  deptId: [{ required: true, message: "请选择设计组", trigger: "change" }],
  difficultyDegree: [{ required: true, message: "请选择难度", trigger: "change" }],
  planStartTime: [{ required: true, message: "请选择计划开始时间", trigger: "change" }],
  planEndTime: [{ required: true, message: "请选择计划完成时间", trigger: "change" }],
});
const dept_props = ref({ checkStrictly: true });
const disabledEnable = (time) => {
  return time.getTime() < Number(add_form_data.value.planStartTime) + 24 * 60 * 60 * 1000;
};
const deptId_cascader = ref(null);
const change_dept_list = (e) => {
  console.log(e, dept_list_arr.value);
  deptId_cascader.value.dropDownVisible = false;
  let obj = dept_list_arr.value.filter((i) => {
    return i.id == e.at(-1);
  });
  add_form_data.value.groupLeaderId = obj[0].memberId;
  add_form_data.value.groupLeaderName = obj[0].director;
};
const list = ref();
const total = ref();
const max_height = ref();
const table_width = window.innerWidth - 280;
const loading = ref(false);
const show_box = ref(false);
const show_plan_box = ref(false); // 计划-进度配置
const item_form_data = ref({}); // 操作项
const taskFile_box = ref(false); // 文件管理
const requireChange_box = ref(false); // 变更单
const submit_box = ref(false); // 资料提交
const show_submit_list_box = ref(false); // 提交记录
const complate_box = ref(false); // 完成
const show_taskOprLog_box = ref(false); // 操作记录
const height_size = ref(1);
const serviceEnterpriseList = ref([]);
const get_serviceEnterpriseList = () => {
  axios
    .request({ url: serviceApi.serviceEnterpriseList, method: "post" })
    .then((res) => {
      if (res.data) {
        res.data.forEach((i) => {
          i.label = i.name;
          i.value = i.id;
        });
        serviceEnterpriseList.value = res.data;
        add_form_data.value.serviceEnterpriseId = res.data[0].id;
      } else if (has_setUp.value == true) {
        has_setUp.value = false;
        ElMessageBox.confirm("请优先完善服务企业以及节点配置", "", {
          type: "warning",
          closeOnClickModal: false,
        })
          .then(() => {
            EventBus.emit("change_default_active", "/serviceEnterprise");
            router.push({ name: "serviceEnterprise" });
          })
          .catch(() => {});
      }
    })
    .catch((err) => {
      ElMessage.error(err);
    });
};
const customStatusList = ref();
const get_customStatusList = () => {
  axios
    .request({
      url: serviceApi.taskStatusConfig + "/list",
      method: "post",
      data: {},
    })
    .then((res) => {
      console.log(res);
      res.data.forEach((i) => {
        i.value = i.code;
        i.label = i.name;
      });
      customStatusList.value = res.data;
    })
    .catch((err) => {
      ElMessage.error(err);
    });
};
const header_list = ref<any>([
  {
    label: "项目名称",
    value: "",
    showTable: true,
    type: "input",
    isShow: true,
    options: [],
  },
  {
    label: "项目代号",
    value: "",
    showTable: true,
    type: "input",
    isShow: true,
    options: [],
  },
  {
    label: "面积",
    value: ["", ""],
    showTable: true,
    type: "input_number",
    isShow: false,
    options: [],
  },
  {
    label: "设计经理",
    value: "",
    showTable: true,
    type: "input",
    isShow: false,
    options: [],
  },
  {
    label: "设计组长",
    value: "",
    showTable: true,
    type: "input",
    isShow: false,
    options: [],
  },
  {
    label: "设计部门",
    value: "",
    showTable: true,
    type: "input",
    isShow: false,
    options: [],
  },
  {
    label: "状态",
    value: "",
    showTable: true,
    type: "select",
    isShow: false,
    options: [
      //   { value: "0", label: "未开始" },
      { value: "1", label: "进行中" },
      { value: "2", label: "资料已提交" },
      { value: "3", label: "已完成" },
    ],
  },
  {
    label: "已用工时",
    value: "",
    showTable: true,
    type: "input",
    isShow: false,
    options: [],
  },
  {
    label: "超时状态",
    value: "",
    showTable: true,
    type: "select",
    isShow: false,
    options: [
      { value: false, label: "未超时" },
      { value: true, label: "已超时" },
    ],
  },
  {
    label: "计划开始时间",
    value: "",
    showTable: true,
    type: "date",
    isShow: false,
    options: [],
  },
  {
    label: "计划完成时间",
    value: "",
    showTable: true,
    type: "date",
    isShow: false,
    options: [],
  },
  {
    label: "实际开始时间",
    value: "",
    showTable: true,
    type: "date",
    isShow: false,
    options: [],
  },
  {
    label: "实际完成时间",
    value: "",
    showTable: true,
    type: "date",
    isShow: false,
    options: [],
  },
  {
    label: "结算状态",
    value: "",
    showTable: true,
    type: "select",
    isShow: false,
    options: [
      { value: false, label: "未结算" },
      { value: true, label: "已结算" },
    ],
  },
  {
    label: "资料提交时间",
    value: "",
    showTable: true,
    type: "date",
    isShow: false,
    options: [],
  },
  {
    label: "三层完成时间",
    value: "",
    showTable: true,
    type: "date",
    isShow: false,
    options: [],
  },
  {
    label: "服务企业",
    value: "",
    showTable: true,
    type: "select",
    isShow: false,
    options: computed(() => {
      return serviceEnterpriseList.value;
    }),
  },
  {
    label: "当前状态",
    value: "",
    showTable: true,
    type: "select",
    isShow: false,
    options: computed(() => {
      return customStatusList.value;
    }),
  },
]);
const page_data = ref({
  current: 1,
  pageSize: 10,
  name: "",
  code: "",
  area: "",
  deptName: "", // 部门 / 组 id
  groupLeaderName: "",
  managerName: "",

  status: "",
  usedHours: "",
  timeoutStatus: "",

  planStartTime: "",
  planEndTime: "",
  actualStartTime: "",
  actualFinishTime: "",
  settleStatus: "",
  informationSubmitTime: "",
  finishTime: "",
  serviceEnterpriseId: "",

  customStatus: "",
});
const add_form_data = ref({
  id: "",
  name: "",
  code: "",
  area: "",
  deptId: "", // 部门 / 组 id
  groupLeaderId: "", // 设计组长
  groupLeaderName: "",
  difficultyDegree: "", // 难度
  managerId: "", // 设计经理
  planStartTime: "",
  planEndTime: "",
  projectId: "",
  serviceEnterpriseId: "",
  planHours: "",
  customStatus: "",
  status: "",
});
const uploadFile = ref();
// 页面权限
const has_role_list = ref([
  { path: "", has_role: false },
  { path: "task/put", has_role: false },
  { path: "task/post", has_role: false },
  { path: "isSeparateRoute", has_role: false },
]);
onMounted(() => {
  has_role_list.value.forEach((item) => {
    item.has_role = check_role(item);
  });
  max_height.value = window.innerHeight - 320; // 带分页的 table 高度
  EventBus.on("refresh", () => {
    get_list();
    ElMessage.success("刷新成功！");
  });
  EventBus.on("close_box", () => {
    expands.value = [];
    show_plan_box.value = false;
    submit_box.value = false;
    complate_box.value = false;
    get_list();
  });
  EventBus.on("uploadFile", (e: any) => {
    // console.log(e);
    uploadFile.value = e.length ? e[0] : {};
  });
  get_dept_list();
  get_current_config_list();
  get_serviceEnterpriseList();
  get_customStatusList();
});

const node_list = ref([]);
const get_current_config_list = () => {
  axios
    .request({
      url: serviceApi.taskWeightConfig + "/getEnabledTaskWeightConfig",
      method: "post",
    })
    .then((res) => {
      console.log(res);
      if (res.data?.detailList) {
        taskSetUp_list.value = res.data.detailList.filter((i) => {
          i.taskWeight = i.weight;
          return i.weight != "";
        });
      }
      get_list();
    })
    .catch((err) => {
      if (err == "企业没有启用的任务占比配置" && has_setUp.value == true) {
        has_setUp.value = false;
        ElMessageBox.confirm("请优先完善配置任务", "", {
          cancelButtonText: "取消",
          confirmButtonText: "确定",
          type: "warning",
          closeOnClickModal: false,
        })
          .then(() => {
            EventBus.emit("change_default_active", "/taskSetUp");
            router.push({ name: "taskSetUp" });
          })
          .catch(() => {});
      } else {
        ElMessage.error(err);
        has_setUp.value = true;
      }
    });
};
const member_list = ref([]);
const dept_list = ref([]);
const dept_list_arr = ref([]);
// 部门列表 用户列表
const get_dept_list = () => {
  axios
    .request({
      url: serviceApi.depart_list,
      method: "post",
      data: handle_search_key({
        enterpriseId: store.state.enterprise_id,
        isEnable: 1,
      }),
    })
    .then((res) => {
      if (res.data.length) {
        dept_list_arr.value = res.data;
        dept_list.value = arrToTree(
          res.data.sort(function (a, b) {
            return a.sort - b.sort;
          })
        );
      }
    })
    .catch((err) => {
      ElMessage.error(err);
    });
  axios
    .request({
      url: serviceApi.user_list,
      method: "post",
      data: handle_search_key({
        current: 1,
        pageSize: 100000,
        enterpriseId: store.state.enterprise_id,
        status: 2,
      }),
    })
    .then((res) => {
      console.log(res);
      member_list.value = res.data.content;
    })
    .catch((err) => {
      loading.value = false;
      ElMessage.error(err);
    });
};
const taskSetUp_list = ref([]);
onUnmounted(() => {
  EventBus.off("refresh");
});
const change_checked = (...e) => {
  let table_item = task_list.value[e[1]];
  let current_item = current_task_list.value.filter((i) => {
    return i.id == table_item.id;
  });
  // 任务完成  => return
  if ([4, 5].includes(current_item[0].status) || current_item[0].completionRate == 100)
    return;
  console.log(e, current_item[0], table_item);
  if (e[0] === "") {
    // 再次分配给同一人
    table_item.taskConfigNodeIdList_table[e[2]].isCancel = false;
  } else if (current_item.length) {
    let has_node = current_item[0].taskMemberNodeList.some((i) => {
      return i.taskNodeConfigId == table_item.taskConfigNodeIdList_table[e[2]].id;
    });
    // 再次分配给同一人 时  勾选取消
    if (!e[0] && has_node && current_item[0].taskMemberNodeList[e[2]].isCancel) {
      table_item.taskConfigNodeIdList_table[e[2]].checked = true;
      table_item.taskConfigNodeIdList_table[e[2]].isCancel =
        current_item[0].taskMemberNodeList[e[2]].isCancel;
    }
  }
};
const select_member = (...e) => {
  console.log(e);
  // 同一任务的多项 不 可分配给同一个人 禁用判断
  if (e[0] != "") {
    if (task_list.value[e[1]].oldAssigneeId == "") {
      task_list.value[e[1]].oldAssigneeId = JSON.parse(JSON.stringify(e[0]));
    } else {
      task_list.value.forEach((i) => {
        i.assigneeId_list = i.assigneeId_list.filter((i) => {
          return i != task_list.value[e[1]].oldAssigneeId;
        });
      });
    }
    task_list.value.forEach((i) => {
      if (i.name == task_list.value[e[1]].name && i.assigneeId != e[0]) {
        i.assigneeId_list.push(e[0]);
      }
    });
    task_list.value[e[1]].oldAssigneeId = JSON.parse(JSON.stringify(e[0]));
  } else {
    task_list.value.forEach((i) => {
      i.assigneeId_list = i.assigneeId_list.filter((i) => {
        return i != task_list.value[e[1]].oldAssigneeId;
      });
    });
    task_list.value[e[1]].oldAssigneeId = "";
  }
  // 切换指派人 => 子任务选择变换
  let table_item = task_list.value[e[1]];
  let current_item = current_task_list.value.filter((i) => {
    return i.id == table_item.id;
  });
  console.log(current_item, table_item.assigneeId);
  if (current_item.length && table_item.assigneeId == current_item[0].assigneeId) {
    table_item.taskConfigNodeIdList_table.forEach((i) => {
      current_item[0].taskMemberNodeList.some((ii) => {
        if (ii.taskNodeConfigId == i.id) {
          i.checked = true;
          i.isCancel = ii.isCancel;
        } else {
          i.checked = false;
        }
        return ii.taskNodeConfigId == i.id;
      });
    });
  } else {
    table_item.taskConfigNodeIdList_table.forEach((i) => {
      i.isCancel = false;
      i.checked = true;
    });
  }
  console.log(task_list.value);
};
const assign_task = (e) => {
  console.log(e, current_task_list.value);
  let flag = e.some((i) => {
    return (
      (i.assigneeId == "" && (i.assignWeight ?? "") != "") ||
      (i.assigneeId != "" && (i.assignWeight ?? "") == "")
    );
  });
  if (flag) {
    ElMessage.error("同一任务分配权重与分配人不可只单独配置一项");
    return;
  }
  let not_nodes = e.some((i) => {
    return (
      (i.assigneeId ?? "") != "" &&
      (i.assignWeight ?? "") != "" &&
      i.taskConfigNodeIdList_table.every((ii) => {
        return !ii.checked;
      })
    );
  });
  if (not_nodes) {
    ElMessage.error("拥有分配人的任务至少分配一个子任务");
    return;
  }
  let all_assignWeight = 0;
  e.forEach((i) => {
    all_assignWeight += i.assignWeight == "" ? 0 : Number(i.assignWeight);
  });
  if (all_assignWeight != 100) {
    ElMessage.error("分配权重之和必须为100");
    return;
  }
  let list = JSON.parse(JSON.stringify(e));

  let data = {};
  console.log(list);
  if (has_task_list.value) {
    // 更新任务配置
    let addList = [];
    let deleteIdList = [];
    let updateList = [];
    e.forEach((i) => {
      let taskConfigNodeIdList = [];
      let DeleteNodeIdList = [];
      let restoreIdList = [];
      if (i.id == "") {
        if (i.assigneeId != "" && i.assignWeight != "") {
          i.taskConfigNodeIdList = [];
          i.taskConfigNodeIdList_table.forEach((ii) => {
            if (ii.checked) {
              i.taskConfigNodeIdList.push(ii.id);
            }
          });
          addList.push(i);
        }
      } else {
        if (i.assignWeight == "") {
          deleteIdList.push(i.id);
        } else {
          let current_item = current_task_list.value.filter((ii) => {
            return ii.id == i.id;
          });
          // 更新 分配人 删除原有  再 新增
          if (i.assigneeId != current_item[0].assigneeId) {
            deleteIdList.push(i.id);
            i.taskConfigNodeIdList = [];
            i.taskConfigNodeIdList_table.forEach((ii) => {
              if (ii.checked) {
                i.taskConfigNodeIdList.push(ii.id);
              }
            });
            addList.push(i);
          } else {
            // 分配人不变  其他参数更新
            let is_update = false;
            if (i.assignWeight != current_item[0].assignWeight) {
              is_update = true;
            }
            // 获取当前选中  与  当前接口返回的任务列表对比  统计新增、删除的子任务
            let checked_table_list = i.taskConfigNodeIdList_table.filter((ii) => {
              return ii.checked;
            });
            current_item[0].taskMemberNodeList.forEach((ii) => {
              let not_node = checked_table_list.some((iii) => {
                return iii.id == ii.taskNodeConfigId;
              });
              // 当前选中 有 接口返回的子任务 且 再次分配
              let restore_node = checked_table_list.some((iii) => {
                return iii.id == ii.taskNodeConfigId && ii.isCancel && !iii.isCancel;
              });
              if (restore_node) restoreIdList.push(ii.id);
              // 当前选中 中没有 接口返回的子任务  => 删除
              if (!not_node) DeleteNodeIdList.push(ii.id);
            });
            i.deleteIdList = DeleteNodeIdList;
            i.restoreIdList = restoreIdList;

            // 接口返回的子任务 中没有  当前选中  => 新增
            checked_table_list.forEach((ii) => {
              let not_node = current_item[0].taskMemberNodeList.some((iii) => {
                return iii.taskNodeConfigId == ii.id;
              });
              if (!not_node) taskConfigNodeIdList.push(ii.id);
            });
            i.taskConfigNodeIdList = taskConfigNodeIdList;

            if (
              taskConfigNodeIdList.length ||
              DeleteNodeIdList.length ||
              restoreIdList.length
            ) {
              is_update = true;
            }
            if (is_update) {
              updateList.push(i);
            }
          }
        }
      }
    });
    data = {
      addList: addList,
      deleteIdList: deleteIdList,
      updateList: updateList,
    };
  } else {
    // 新增任务配置
    list.forEach((i) => {
      i.taskConfigNodeIdList = [];
      i.taskConfigNodeIdList_table.forEach((ii) => {
        if (ii.checked) {
          i.taskConfigNodeIdList.push(ii.id);
        }
      });
    });
    data = {
      taskMemberVOList: list.filter((i) => {
        return i.assigneeId != "" && i.assignWeight != "";
      }),
    };
  }
  console.log(data);
  //   return;
  ElMessageBox.confirm(
    has_task_list.value
      ? "确认更新分配任务？"
      : "分配任务后项目将不可变更设计经理、设计组以及组长，确认分配任务？",
    "",
    {
      cancelButtonText: "取消",
      confirmButtonText: "确定",
      closeOnClickModal: false,
      type: "warning",
    }
  )
    .then(() => {
      axios
        .request({
          url: has_task_list.value
            ? serviceApi.updateAssignments + "/" + expands.value[0]
            : serviceApi.confirmAssignments + "/" + expands.value[0],
          method: "post",
          data: data,
        })
        .then((res) => {
          console.log(res);
          ElMessage.success("操作成功！");
          setTimeout(() => {
            get_list();
          }, 1000);
        })
        .catch((err) => {
          ElMessage.error(err);
        });
    })
    .catch(() => {});
};
const tables = ref(null);
const task_list = ref([]);
const add_task_item = (e) => {
  console.log(e);
  let task_list_item = {
    id: "",
    name: e.list[e.index].name,
    code: e.list[e.index].code,
    assignWeight: "",
    taskWeight: e.list[e.index].taskWeight,
    assigneeId: "",
    taskId: e.list[e.index].taskId,
    taskConfigId: e.list[e.index].taskConfigId,
    isAdd: true,
    taskConfigNodeIdList_table: [],
    assigneeId_list: [],
    oldAssigneeId: "",
  };
  task_list.value.forEach((i) => {
    if (i.taskConfigId == e.list[e.index].taskConfigId && i.assigneeId != "") {
      task_list_item.assigneeId_list.push(i.assigneeId);
    }
  });
  node_list.value.forEach((i) => {
    task_list_item.taskConfigNodeIdList_table.push({
      id: i.taskNodeConfigId,
      checked: false,
      completionRate: 0,
    });
  });
  e.list.splice(e.index + 1, 0, task_list_item);
  console.log(e.list, task_list_item);
};
const dept_member_list = ref([]);
const expands = ref([]);
const task_info_planStartTime = ref();
const task_info_planEndTime = ref();
const expandChange = (e, expandedRows) => {
  console.log(e);
  if (expandedRows.length) {
    expands.value = [];
    if (e) {
      expands.value.push(e.id); // 每次push进去的是每行的ID
    }
  } else {
    expands.value = []; // 默认不展开
  }
  if (!expands.value.length) return;
  task_info_planStartTime.value = Number(e.planStartTime);
  task_info_planEndTime.value = Number(e.planEndTime);
  get_task_info(e);
};
const has_task_list = ref(false); // 是否有已配好的任务
const current_task_list = ref([]); // 已配好的任务 列表  （更新时的参照）
const children_loading = ref(false);
const get_task_info = (e) => {
  console.log(e);
  children_loading.value = true;
  task_list.value = [];
  axios
    .request({
      url: serviceApi.assignTaskList + "/" + e.id,
      method: "post",
    })
    .then((res) => {
      console.log(res, taskSetUp_list.value);
      has_task_list.value = res.data.taskMemberList.length != 0;
      node_list.value = res.data.taskNodeDTOList;
      current_task_list.value = JSON.parse(JSON.stringify(res.data.taskMemberList));
      let taskConfigNodeIdList_table = [];
      node_list.value.forEach((i) => {
        taskConfigNodeIdList_table.push({
          id: i.taskNodeConfigId,
          checked: !has_task_list.value,
          isCancel: false,
          completionRate: 0,
        });
      });
      taskSetUp_list.value.forEach((item) => {
        let obj = {
          id: "",
          name: item.name,
          code: item.code,
          assignWeight: res.data.taskMemberList.length ? "" : item.taskWeight,
          taskWeight: item.taskWeight,
          assigneeId: "",
          taskId: e.id,
          taskConfigId: item.taskConfigId,
          taskConfigNodeIdList_table: JSON.parse(
            JSON.stringify(taskConfigNodeIdList_table)
          ),
          status: "",
          assigneeId_list: [],
          oldAssigneeId: "",
        };
        task_list.value.push(obj);
      });

      res.data.taskMemberList.forEach((i) => {
        task_list.value.some((ii, index2) => {
          if (i.taskConfigId == ii.taskConfigId && ii.assigneeId == "") {
            console.log(i.taskMemberNodeList);
            ii.id = i.id;
            ii.name = i.taskName;
            ii.code = i.taskCode;
            ii.status = i.status;
            ii.assignWeight = i.assignWeight;
            ii.taskWeight = i.taskWeight;
            ii.assigneeId = i.assigneeId;
            ii.oldAssigneeId = i.assigneeId;
            ii.taskConfigNodeIdList_table.forEach((iii) => {
              iii.checked = i.taskMemberNodeList.some((xx) => {
                if (xx.taskNodeConfigId == iii.id) {
                  iii.isCancel = xx.isCancel;
                  iii.completionRate = xx.completionRate;
                }
                return xx.taskNodeConfigId == iii.id;
              });
            });
            return true;
          } else if (i.taskConfigId == ii.taskConfigId && ii.assigneeId != "") {
            console.log(i.taskMemberNodeList, ii.assigneeId, i.assigneeId);
            i.isAdd = true;
            i.assigneeId_list = [];
            i.assigneeId_list.push(ii.assigneeId);
            ii.assigneeId_list = [];
            ii.assigneeId_list.push(i.assigneeId);
            i.oldAssigneeId = i.assigneeId;
            i.name = i.taskName;
            i.code = i.taskCode;
            let list = JSON.parse(JSON.stringify(taskConfigNodeIdList_table));
            list.forEach((iii) => {
              iii.checked = i.taskMemberNodeList.some((xx) => {
                if (xx.taskNodeConfigId == iii.id) {
                  iii.isCancel = xx.isCancel;
                  iii.completionRate = xx.completionRate;
                }
                return xx.taskNodeConfigId == iii.id;
              });
            });
            i.taskConfigNodeIdList_table = JSON.parse(JSON.stringify(list));
            task_list.value.splice(index2 + 1, 0, i);
            return true;
          }
        });
      });
      console.log(task_list.value);
      list.value.some((item1) => {
        if (item1.id == e.id) {
          item1.task_list = task_list.value;
        }
        return item1.id == e.id;
      });
      children_loading.value = false;
    })
    .catch((err) => {
      children_loading.value = false;
      ElMessage.error(err);
    });
  axios
    .request({
      url: serviceApi.depart_user_list,
      method: "post",
      params: { deptId: e.deptId },
    })
    .then((res) => {
      console.log(res);
      dept_member_list.value = res.data == null ? [] : res.data;
    })
    .catch((err) => {
      ElMessage.error(err);
    });
};
const submit = async (formEl: FormInstance | undefined) => {
  await formEl.validate((valid) => {
    if (valid) {
      if (btn_loading.value) return;
      btn_loading.value = true;
      add_form_data.value.deptId = Array.isArray(add_form_data.value.deptId)
        ? add_form_data.value.deptId.at(-1)
        : add_form_data.value.deptId;
      let fileList = [];
      if (add_form_data.value.id == "" && (uploadFile.value as any).file_data) {
        (uploadFile.value as any).file_data.forEach((i) => {
          let obj = {
            fileConfigId: i.id,
            fileName: i.fileName.length ? i.fileName.toString() : "",
            fileUrl: i.url.length ? i.url.toString() : "",
          };
          fileList.push(obj);
        });
      }

      let data = Object.assign(
        add_form_data.value,
        add_form_data.value.id == "" ? { nodeConfigFileVOList: fileList } : {}
      );
      axios
        .request({
          url:
            data.id == "" ? serviceApi.task_curd : serviceApi.task_curd + "/" + data.id,
          method: data.id == "" ? "post" : "put",
          data: data,
        })
        .then(() => {
          ElMessage.success("操作成功！");
          setTimeout(() => {
            btn_loading.value = false;
            resetForm(formEl);
            get_list();
            show_box.value = false;
          }, 1000);
        })
        .catch((err) => {
          ElMessage.error(err);
          btn_loading.value = false;
        });
    }
  });
};
const edit_list = (e) => {
  add_form_data.value = {
    id: e.id,
    name: e.name,
    code: e.code,
    area: e.area,
    deptId: e.deptId, // 部门 / 组 id
    groupLeaderId: e.groupLeaderId, // 设计组长
    groupLeaderName: e.groupLeaderName,
    difficultyDegree: e.difficultyDegree, // 难度
    managerId: e.managerId, // 设计经理
    planStartTime: parseInt(e.planStartTime) as any,
    planEndTime: parseInt(e.planEndTime) as any,
    projectId: e.projectId,
    serviceEnterpriseId: e.serviceEnterpriseId,
    planHours: e.planHours,
    customStatus: e.customStatus,
    status: e.status,
  };
  show_box.value = true;
};
const btn_loading = ref(false);
const has_setUp = ref(true);
const get_list = () => {
  loading.value = true;
  axios
    .request({
      url: serviceApi.tesk_list,
      method: "post",
      data: handle_search_key(page_data.value),
    })
    .then((res) => {
      console.log(res, expands.value);
      list.value = res.data.content;
      total.value = parseInt(res.data.totalElements);
      if (expands.value.length) {
        let arr = res.data.content.filter((i) => {
          return i.id == expands.value[0];
        });
        get_task_info(arr[0]);
      }
      loading.value = false;
    })
    .catch((err) => {
      if (err == "企业没有启用的配置" && has_setUp.value == true) {
        has_setUp.value = false;
        ElMessageBox.confirm("请优先配置任务单价", "", {
          type: "warning",
          closeOnClickModal: false,
        })
          .then(() => {
            EventBus.emit("change_default_active", "/taskUnitPriceSetUp");
            router.push({ name: "taskUnitPriceSetUp" });
          })
          .catch(() => {});
      } else {
        ElMessage.error(err);
        has_setUp.value = true;
      }
      loading.value = false;
    });
};
let list_debounce = debounce(200, get_list);
const search_key = () => {
  console.log(header_list.value);
  page_data.value = {
    current: 1,
    pageSize: 10,
    name: header_list.value[0].value,
    code: header_list.value[1].value,
    area: header_list.value[2].value,
    managerName: header_list.value[3].value, // 设计经理
    groupLeaderName: header_list.value[4].value, //设计组长
    deptName: header_list.value[5].value,
    status: header_list.value[6].value,
    usedHours: header_list.value[7].value,
    timeoutStatus:
      header_list.value[8].value == undefined ? false : header_list.value[8].value,

    planStartTime: header_list.value[9].value as any,
    planEndTime: header_list.value[10].value as any,
    actualStartTime: header_list.value[11].value as any,

    actualFinishTime: header_list.value[12].value,
    settleStatus: header_list.value[13].value as any,
    informationSubmitTime: header_list.value[14].value as any,
    finishTime: header_list.value[15].value as any,
    serviceEnterpriseId: header_list.value[16].value,
    customStatus: header_list.value[17].value,
  };
  get_list();
};
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
  add_form_data.value = {
    id: "",
    name: "",
    code: "",
    area: "",
    deptId: "", // 部门 / 组 id
    groupLeaderId: "", // 设计组长
    groupLeaderName: "",
    difficultyDegree: "", // 难度
    managerId: "", // 设计经理
    planStartTime: "",
    planEndTime: "",
    projectId: "",
    serviceEnterpriseId: add_form_data.value.serviceEnterpriseId,
    planHours: "",
    customStatus: "",
    status: "",
  };
  show_box.value = false;
};
const arrToTree = (list) => {
  var map = {};
  var result = [];
  list.forEach((item) => {
    map[item.id] = item;
  });
  list.forEach((item) => {
    item.label =
      item.name + (item.director == "" ? " (无主管)" : " (主管：" + item.director + ")");
    item.value = item.id;
    item.disabled = item.director == "";
    let parent = map[item.parentId];
    if (parent) {
      if (!parent.children) {
        parent.children = [];
      }
      parent.children.push(item);
    } else {
      result.push(item);
    }
  });
  return result;
};
</script>

<style lang="scss" scoped>
.top_item {
  border: 1px solid #ccc;
  cursor: pointer;
  padding: 5px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  &:hover {
    color: #3580eb;
    border-color: #3580eb;
  }
}
.line {
  background-color: #333;
  width: 1px;
  height: 16px;
  margin: 0 10px;
}
</style>
